<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .article{
            width: 300px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div id="app">
        <color-select></color-select>
        <show-article></show-article>
    </div>
    
</body>
<template id="compA">
    <div class="colorSelector">
        <input type="color" :value="color"  @change="colorChangeHanlder">
    </div>
</template>
<template id="compB">
    <div class="article"  :style="{color:color}">
        <!-- <div class="article-header"></div>
        <div class="article-container"></div>
        <div class="article-footer"></div> -->
        <p>
            Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
        </p>
    </div>
</template>
<script>
    Vue.component("color-select",{
        data(){
            return {
                color:"#666666"
            }
        },
        template:"#compA",
        methods:{
            colorChangeHanlder(e){
                console.log("color发生了改变");
                this.color = e.target.value;
            }
        }
    })

    Vue.component("ShowArticle",{
        data(){
            return {
                color:"#666666"
            }
        },
        template:"#compB",
    })


    var vm = new Vue({
        el:"#app",
        data:{

        },
    })




</script>
</html>